<style lang="scss" scoped>
::v-deep .el-form-item__content{
  .is-disabled{
    input,textarea{
      background: #FFF;
      color: var(--el-input-text-color,var(--el-text-color-regular)) !important;
      -webkit-text-fill-color: var(--el-input-text-color,var(--el-text-color-regular)) !important;
    }
  }
}
</style>

<template>
  <div class=" grid grid-cols-2 items-center">
    <el-date-picker
      v-model="filterInfo.time"
      type="datetimerange"
      range-separator="至"
      start-placeholder="选择检查时间范围"
      end-placeholder="截止日期"
    />

    <el-select v-model="filterInfo.sortby"
      class="m-2" placeholder="选择排序方式" >
      <el-option
        v-for="item in [
          { label:'通行车辆',value:0 },
          { label:'过检车辆',value:1 },
          { label:'中标车辆',value:2 },
        ]"
        :key="item.value"
        :label="item.label"
        :value="item.value"
      />
    </el-select>
  </div>

  <div class=" h-64 flex justify-end">
    <Echart
        class=" w-full h-full"
        :loading="!chartData"
        :option="chartData || {}"
        :events="[
          ['click',ClickChart]
        ]"
      />
  </div>
  
  <el-table 
    :data="baseinfo" 
    border
    ref="tableDom"
    style="width: 100%"
    height="calc(100vh - 390px)"
    :cell-class-name="({rowIndex})=>activeIndex===rowIndex?'bg-blue-500 text-white':`${activeIndex}-${rowIndex}`"
  >
    <el-table-column prop="index"   label="名次"   width="120" fixed="left"  />
    <el-table-column prop="path"    label="检查站" width="200" />
    <el-table-column prop="txnum"   label="通行车辆" />
    <el-table-column prop="gjnum"   label="过检车辆" />
    <el-table-column prop="zbnum"   label="中标车辆" />
  </el-table>
</template>

<script lang="ts" setup >
import { reactive, toRefs, ref } from '@vue/reactivity'
import { computed, h, onBeforeMount, watch } from '@vue/runtime-core'
import { getStaList } from 'api'
import { ElMessage, ElMessageBox } from 'element-plus'
import { useStore } from 'vuex'
import { Edit,Delete,ChatLineRound,Plus,Upload,Download } from '@element-plus/icons-vue'
import { debounce } from 'lodash'
import { createComponent } from 'echarts-for-vue';
import * as echarts from 'echarts'
import mackchartsdata from './mackchartsdata'
const Echart = createComponent({echarts,h})

const data = reactive({
  baseinfo:[],
  filterInfo:{
    time:[],
    sortby:0
  },
  chartData:false,
  activeIndex:false
})

const getData = async () => {
  const { total,baseinfo } = await getStaList(data.pageInfo)
  const chartData = mackchartsdata(baseinfo)
  Object.assign(data,{baseinfo,total,chartData})
}

const debounce_get = debounce(()=>{
  getData()
},500)

onBeforeMount(async ()=>{
  const today = new Date()
  const yesteday = new Date(new Date() - (24 * 60 * 60 * 1000))
  data.filterInfo.time = [yesteday,today]
  const store = useStore()
  await getData()

  watch(()=>data.filterInfo,()=>{
    debounce_get()
  },{deep:true})
})




let SetTime
let tableDom = ref()
const ClickChart = ({dataIndex}) => {
  clearTimeout(SetTime)
  Object.assign(data,{activeIndex:dataIndex})
  tableDom.value.setScrollTop((dataIndex - 1) * 40)
  SetTime = setTimeout(()=>{
    Object.assign(data,{activeIndex:false})
  },5000)
}

const { baseinfo, filterInfo, chartData, activeIndex } = { ...toRefs(data) }

</script>